import React, { useEffect, useState } from 'react'
import '../css/Hwj_index.css'
import { Toast, NavBar, Tag, Divider, Cell, Tabs, Sticky, Steps } from 'react-vant';
import { createFromIconfontCN } from '@react-vant/icons'
import { useLocation, useNavigate } from 'react-router-dom';
import { get } from '../../../axios/request'
const IconFont = createFromIconfontCN(
    '//at.alicdn.com/t/c/font_4695075_oa1temkdqb.js'
)
import '@nutui/nutui-react/dist/style.css'
export default function Hwj_progresscon() {
    let navigate = useNavigate()
    let [progress, setProgress] = useState([])
    let location = useLocation()
    let id = location.state.id
    let getprogress = async () => {
        let res = await get('/hwj/getprogress')
        console.log(res.data);
        if (res.code === 200) {
            setProgress(res.data)
        }
    }
    useEffect(() => {
        getprogress()
    }, [])
    return (
        <div id='progressconbox'>
            <Sticky>
                <div className="headerbox">
                    <NavBar
                        title="处理进度详情"
                        // leftText=""
                        // rightText="按钮"
                        onClickLeft={() => { navigate(-1) }}
                        onClickRight={() => Toast('按钮')}

                    />
                </div>
            </Sticky>
            {
                progress.filter(j=>j._id===id).map(i => (
                    <div key={i._id}>
                        <div className="con_1">
                            <h2>{i.ty}</h2>
                            <p>*已同意客服听取本次行程录音作为判责依据</p>
                        </div>
                        <div className="con_2">
                            <Divider style={{ borderColor: 'grey', padding: '0 16px' }}>
                                <span>{i.sta}</span>
                            </Divider>
                        </div>
                        <div className="con_3">
                            <Steps direction="vertical" active={0} activeColor='rgb(255, 88, 14)'>
                                <Steps.Item>
                                    <div className='item'>
                                        <h3>处理结果</h3>
                                        <p>
                                            您反馈的问题我们已记录。如反馈情况属实，司机将按照平台规则承担违规责任。
                                        </p>
                                        <p>
                                            您的订单宇哥已修改为6元，请您核对。
                                        </p>
                                        <p style={{ color: 'rgb(214, 212, 208)' }}>2016-07-12 12:40</p>
                                    </div>
                                </Steps.Item>
                                <Steps.Item>
                                    <div className='item'>
                                        <h3>提交成功</h3>
                                        <p>{i.txt}</p>
                                        <p style={{ color: 'rgb(214, 212, 208)' }}>2016-07-11 10:00</p>
                                    </div>
                                </Steps.Item>
                            </Steps>
                        </div>
                    </div>
                ))
            }
        </div>
    )
}
